Web Page Design for Designers

 


 

 

The curtain-drapes look better in 8-bits than might be expected giving the illusion of a higher bit depth.

There are a number of techniques going on here including the trick of having the palette graphic always centered in the height and width of the browser.

This page describes how to squeeze more colours out of a GIF file and the next shows how to produce a virtual slide show within your web browser.

 

Curtain Tile

This is the background
GIF from the example on
the
previous page

 

 

This file was produced in Photoshop using reds from the 6x6x6 web palette and blending between them. It was saved as an Adaptive 5-bit GIF file with No Dither.

Note that the 'tile' holds two repeats of the curtain. One repeat would have produced a tile that was less than 64 pixels which can cause display problems on some systems.

The height of the tile is 16 pixels. Strictly speaking, a height of 1 pixel would have produced the same effect, but that gives the browser more work to do and slows down display on less powerful machines.

 

Almost every horizontal pixel is changing
in this graphic, it will not compress efficiently,
nevertheless, it is still well below 2K
in size because of the low bit-depth used.

By specifying 5-bits when converting from RGB to Adaptive Index, Photoshop is forced to create a palette with 32 steps from red to black. The tile is 'banding' but in a very subtle way.

It gives essentially the same effect as dithering but the vertical stripes are appropriate to the subject - this won't always be the case.

The enlargement shows that there are more reds in the file than in the web palette. In fact, when I did a screen grab of the Netscape browser window and looked at the Color Table in Photoshop, there were 224 colours instead of 216. The extra 8 red shades of red had been added to the web palette from the Mac palette.

 

 

 

menunext